import * as echarts from '../../components/ec-canvas/echarts';
import * as api from '../../utils/api';
import * as util from '../../utils/util';

Page({
    data: {
        systolicPressure: 0, // 收缩压
        diastolicPressure: 0, // 舒张压
        lasttime: "", //最后测量时间
        systolicStatus: 'normal', // 收缩压状态
        diastolicStatus: 'normal', // 舒张压状态
        // 表单数组
        times: [],
        dbps: [],
        sbps: [],
        // ec-canvas所需三项配置
        ec: {
            // 将 lazyLoad 设为 true 后，需要手动初始化图表
            lazyLoad: true
        },
        isLoaded: false,
        isDisposed: false
    },

    onLoad: function () {

    },

    onReady: function () {
        // 获取组件
        this.ecComponent = this.selectComponent('#mychart-dom-bar');
        // 判断数据
        if (getApp().globalData.token) {
            if (getApp().globalData.device_id) {
                this.getFormDataFromFlask();
            } else {
                wx.navigateTo({
                    url: '/pages/settings/settings'
                });
            }
        } else {
            // 登录
            api.my_login().then(loginData => {
                console.log('登录成功:', loginData);
                if (getApp().globalData.device_id) {
                    // 如果已绑定设备，则获取数据
                    this.getFormDataFromFlask();
                } else {
                    // 否则跳转到设置页面
                    wx.navigateTo({
                        url: '/pages/settings/settings'
                    });
                }
            }).catch(error => {
                console.error('登录失败:', error);
            });
        }
    },

    checkBloodPressureStatus: function () {
        const systolic = this.data.systolicPressure;
        const diastolic = this.data.diastolicPressure;

        // 判断收缩压
        if (systolic < 90 || systolic > 120) {
            this.setData({
                systolicStatus: 'abnormal'
            });
        } else {
            this.setData({
                systolicStatus: 'normal'
            });
        }

        // 判断舒张压
        if (diastolic < 60 || diastolic > 80) {
            this.setData({
                diastolicStatus: 'abnormal'
            });
        } else {
            this.setData({
                diastolicStatus: 'normal'
            });
        }
    },

    getFormDataFromFlask: function () {
        // 从 Flask 后端获取数据
        const today = util.getTodayDate();
        // 请求数据
        api.my_get(`/search_data/${today}`, {}).then((data) => {
            this.initFormDataFromFlask(data);
        }).catch((error) => {
            console.error('请求失败:', error);
        });
    },

    initFormDataFromFlask: function (data) {
        console.warn(data);
        // 函数将返回的列表数据转换为三个数组，并按时间排序
        // 获取原始数据列表
        let list = data.list;
        // 按时间（time）排序
        list.sort((a, b) => a.time - b.time);
        // 初始化三个空数组
        let times = [];
        let dbps = [];
        let sbps = [];
        // 遍历排序后的数据并填充三个数组
        list.forEach(item => {
            // 格式化时间（hh:mm）
            const hour = String(item.h).padStart(2, '0'); // 确保小时为两位数
            const minute = String(item.m).padStart(2, '0'); // 确保分钟为两位数
            times.push(`${hour}:${minute}`);
            // 将 dbp 和 sbp 值加入对应的数组
            dbps.push(parseInt(item.dbp));
            sbps.push(parseInt(item.sbp));
        });
        this.setData({
            systolicPressure: sbps[sbps.length - 1], // 收缩压
            diastolicPressure: dbps[dbps.length - 1], // 舒张压
            lasttime: times[times.length - 1],
            // 表单数组
            times: times,
            dbps: dbps,
            sbps: sbps,
        })
        // 判断收缩压和舒张压是否正常
        this.checkBloodPressureStatus();
        // 渲染表单
        this.ecComponent.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr // new
            });
            var option = {
                title: {
                    text: '今日血压',
                    left: 'center'
                },
                legend: {
                    data: ['高压', '低压'],
                    top: 50,
                    left: 'center',
                    z: 100
                },
                grid: {
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: times,
                },
                yAxis: {
                    x: 'center',
                    type: 'value',
                    max: function (value) {
                        // 根据数据的最大值动态计算y轴最大值，留出一定空间
                        return parseInt(String(value.max + (value.max * 0.2))); // 比如最大值加20%
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    name: '高压',
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: '#FF6347'  // 设置高压线的颜色为番茄红
                    },
                    data: sbps
                }, {
                    name: '低压',
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: '#4682B4'  // 设置低压线的颜色为钢蓝色
                    },
                    data: dbps
                }]
            };

            chart.setOption(option);
            // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
            this.chart = chart;

            this.setData({
                isLoaded: true,
                isDisposed: false
            });
            return chart;
        });
    }
});
